import React, { useRef, useCallback, useEffect, memo, Component } from "react";
import { Row, Col } from "antd";
import moment from "moment";
import echarts from "echarts";
import Echarts from "echarts-for-react";
import ReactSeamlessScroll from "react-seamless-scroll";
import * as KanBanService from "../../axios/KanBanWorkShop_api";
import styles from "./index.module.scss";
const weekDays = [
  "星期天",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
function getDateStr() {
  let date = new Date();
  let YYMMDD = moment(date).format("YYYY 年 MM 月 DD 日");
  let HHmmss = moment(date).format("HH:mm:ss");
  let weekDay = weekDays[date.getDay()];
  return (
    <div>
      {YYMMDD}&emsp;{HHmmss}&emsp;{weekDay}
    </div>
  );
}

/**
 * Echarts
 * @returns
 */
const Echarts33 = function ({ data }) {
  let data1 = data.total; // 总数
  let getvalue = (data.yes / data1) * 180;
  const options = {
    // backgroundColor: '#fff',
    title: {
      text: data.total,
      textStyle: {
        color: "#fff",
        fontSize: 32,
        fontWeight: "bold",
      },
      left: "center",
      top: 120,
      // bottom: '69%',
      // itemGap: 60,
    },
    tooltip: {
      show: false,
    },
    color: ["#01dadc", "#23cea7", "#5096e0"],
    series: [
      {
        name: "一般",
        type: "pie",
        //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
        startAngle: 330,
        hoverAnimation: false,
        tooltip: {},
        radius: ["60%", "90%"],
        // center: ['50%', '65%'],
        label: {
          show: true,
          position: "inside",
          color: "#fff",
          fontWeight: "bold",
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        // labelLine: {
        //     normal: {
        //         show: false
        //     }
        // },
        data: [
          {
            value: data.yes,
            itemStyle: {
              normal: {
                color: "rgba(80,150,224,0)",
              },
            },
          },
          {
            value: data.yes,
            name: data.yes,
            itemStyle: {
              // normal: {
              //     color: "rgba(80,150,224,1)"
              // }
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#25BFFF",
                  },
                  {
                    offset: 1,
                    color: "#5284DE",
                  },
                ]),
                shadowBlur: 5,
                shadowColor: "#2A95F9",
              },
            },
          },
          {
            value: data.no,
            name: data.no,
            itemStyle: {
              // normal: {
              //     color: "rgba(80,150,224,0.1)"
              // }
              normal: {
                opacity: 1,
                color: "#093368",
              },
            },
          },
        ],
      },
    ],
  };

  return (
    <div style={{ position: "relative" }}>
      <Echarts option={options} style={{ width: "100%", height: "25vh" }} />
      <div
        style={{
          color: "#fff",
          textAlign: "center",
          position: "absolute",
          bottom: 30,
          left: "30%",
          fontSize: "20px",
        }}
      >
        计划达成率：{data.rate} %
      </div>
    </div>
  );
};

// 滚动
function useBoxScroll(outerEl, contentEl) {
  const timerRef = useRef();

  const doScroll = useCallback(() => {
    if (outerEl == null || contentEl == null) {
      return;
    }
    if (outerEl.scrollTop >= contentEl.offsetHeight - outerEl.clientHeight) {
      outerEl.scrollTop = 0;
    } else {
      outerEl.scrollTop += 1;
    }
  }, [contentEl, outerEl]);

  const stop = useCallback(() => {
    clearInterval(timerRef.current);
  }, []);

  const start = useCallback(() => {
    timerRef.current = setInterval(doScroll, 100);
  }, [doScroll]);

  useEffect(() => {
    start();
    return () => stop();
  }, [start, stop]);

  return { start, stop };
}

// 质量检验
const Table1 = memo(function Table1({ data }) {
  const outerEl = useRef();
  const contentEl = useRef();
  const { start, stop } = useBoxScroll(outerEl.current, contentEl.current);

  return (
    <div className={styles.warnInfo}>
      <div className={styles.theader}>
        <div style={{ width: "20%" }}>批次号</div>
        <div style={{ width: "15%" }}>生产时间</div>
        <div style={{ width: "15%" }}>检验结果</div>
        <div style={{ width: "15%" }}>检验人</div>
        <div style={{ width: "15%" }}>检验时间</div>
        <div style={{ width: "20%" }}>不合格原因</div>
      </div>
      <ReactSeamlessScroll style={{ width: "100%", height: "34vh" }}>
        <div
          className={styles.bodyHeight}
          ref={outerEl}
          style={{ height: "34vh", overflow: "hidden" }}
          onMouseEnter={stop}
          onMouseLeave={start}
        >
          <div className={styles.scrollBody} ref={contentEl}>
            {Array.isArray(data) && data.length > 0 ? (
              data.map((val, index) => {
                let color;
                switch (val.state) {
                  case 1:
                    color = " #F84973";
                    break;
                  case 2:
                    color = "#5AF293";
                    break;
                  case 3:
                    color = "#0E8EFF";
                    break;
                  case 4:
                    color = "#B869F7";
                    break;
                  default:
                    color = " #F84973";
                    break;
                }
                return (
                  <li
                    key={index}
                    className={styles.theader}
                    style={{ fontWeight: "normal", paddingLeft: 0 }}
                  >
                    <div style={{ color: "#7FAFFF", width: "20%" }}>
                      {val.batchNo}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.produceTime}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.result}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.checker}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.checkTime}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "20%" }}>
                      {val.reason}
                    </div>
                  </li>
                );
              })
            ) : (
              <li
                style={{
                  height: "100%",
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  color: "#fff",
                }}
              >
                <div style={{ fontWeight: 600, padding: 20 }}>暂无数据</div>
              </li>
            )}
          </div>
        </div>
      </ReactSeamlessScroll>
    </div>
  );
});
// 生产进度
const Table2 = memo(function Table2({ data }) {
  const outerEl = useRef();
  const contentEl = useRef();
  const { start, stop } = useBoxScroll(outerEl.current, contentEl.current);

  return (
    <div className={styles.warnInfo}>
      <div className={styles.theader}>
        <div style={{ width: "5%" }}>序号</div>
        <div style={{ width: "15%" }}>生产批次</div>
        <div style={{ width: "14%" }}>班组</div>
        <div style={{ width: "9%" }}>装配进度</div>
        <div style={{ width: "8%" }}>试机进度</div>
        <div style={{ width: "8%" }}>质检进度</div>
        <div style={{ width: "13%" }}>生产开始时间</div>
        <div style={{ width: "13%" }}>生产结束时间</div>
        <div style={{ width: "15%" }}>批号状态</div>
      </div>
      <ReactSeamlessScroll style={{ width: "100%", height: "34vh" }}>
        <div
          className={styles.bodyHeight}
          ref={outerEl}
          style={{ height: "34vh", overflow: "hidden" }}
          onMouseEnter={stop}
          onMouseLeave={start}
        >
          <div className={styles.scrollBody} ref={contentEl}>
            {Array.isArray(data) && data.length > 0 ? (
              data.map((val, index) => {
                let color;
                switch (val.state) {
                  case 1:
                    color = " #F84973";
                    break;
                  case 2:
                    color = "#5AF293";
                    break;
                  case 3:
                    color = "#0E8EFF";
                    break;
                  case 4:
                    color = "#B869F7";
                    break;
                  default:
                    color = " #F84973";
                    break;
                }
                return (
                  <li
                    key={index}
                    className={styles.theader}
                    style={{ fontWeight: "normal", paddingLeft: 0 }}
                  >
                    <div style={{ color: "#7FAFFF", width: "5%" }}>
                      {index + 1}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.batchNo}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "14%" }}>
                      {val.groupName}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "9%" }}>
                      {val.assemble}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "8%" }}>
                      {val.testMachine}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "8%" }}>
                      {val.qualityCheck}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "13%" }}>
                      {val.startTime}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "13%" }}>
                      {val.endTime}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.states}
                    </div>
                  </li>
                );
              })
            ) : (
              <li
                style={{
                  height: "100%",
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  color: "#fff",
                }}
              >
                <div style={{ fontWeight: 600, padding: 20 }}>暂无数据</div>
              </li>
            )}
          </div>
        </div>
      </ReactSeamlessScroll>
    </div>
  );
});
// 物料发放
const Table3 = memo(function Table3({ data }) {
  const outerEl = useRef();
  const contentEl = useRef();
  const { start, stop } = useBoxScroll(outerEl.current, contentEl.current);

  return (
    <div className={styles.warnInfo}>
      <div className={styles.theader}>
        <div style={{ width: "5%" }}>序号</div>
        <div style={{ width: "15%" }}>生产批次</div>
        <div style={{ width: "10%" }}>物料总量</div>
        <div style={{ width: "10%" }}>已发数量</div>
        <div style={{ width: "10%" }}>接收数量</div>
        <div style={{ width: "10%" }}>欠料数量</div>
        <div style={{ width: "15%" }}>要料时间</div>
        <div style={{ width: "10%" }}>物料齐套率</div>
        <div style={{ width: "15%" }}>领料班组</div>
      </div>
      <ReactSeamlessScroll style={{ width: "100%", height: "34vh" }}>
        <div
          className={styles.bodyHeight}
          ref={outerEl}
          style={{ height: "34vh", overflow: "hidden" }}
          onMouseEnter={stop}
          onMouseLeave={start}
        >
          <div className={styles.scrollBody} ref={contentEl}>
            {Array.isArray(data) && data.length > 0 ? (
              data.map((val, index) => {
                let color;
                switch (val.state) {
                  case 1:
                    color = " #F84973";
                    break;
                  case 2:
                    color = "#5AF293";
                    break;
                  case 3:
                    color = "#0E8EFF";
                    break;
                  case 4:
                    color = "#B869F7";
                    break;
                  default:
                    color = " #F84973";
                    break;
                }
                return (
                  <li
                    key={index}
                    className={styles.theader}
                    style={{ fontWeight: "normal", paddingLeft: 0 }}
                  >
                    <div style={{ color: "#7FAFFF", width: "5%" }}>
                      {index + 1}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.batchNo}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "10%" }}>
                      {val.total}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "10%" }}>
                      {val.out}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "10%" }}>
                      {val.accept}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "10%" }}>
                      {val.owe}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.requestTime}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "10%" }}>
                      {val.qtRate ? val.qtRate + "%" : ""}
                    </div>
                    <div style={{ color: "#7FAFFF", width: "15%" }}>
                      {val.groupName}
                    </div>
                  </li>
                );
              })
            ) : (
              <li
                style={{
                  height: "100%",
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  color: "#fff",
                }}
              >
                <div style={{ fontWeight: 600, padding: 20 }}>暂无数据</div>
              </li>
            )}
          </div>
        </div>
      </ReactSeamlessScroll>
    </div>
  );
});
class KanBan extends Component {
  state = {
    times: getDateStr(),
    planData_month: {},
    planData_week: {},
    qualityData: [],
    qualityList: [],
    produceRate: [],
    matterSend: [],
  };
  async componentDidMount() {
    await this.getDataList();
    this.timer = setInterval(async () => {
      this.getDataList();
    }, 60000);
  }
  /**
   * 所有接口
   */
  getDataList = () => {
    KanBanService.planData().then((res) => {
      if (res.data.code == 200) {
        let data = res?.data?.data || [];
        for (var item of data) {
          if (item.type == 7) {
            this.setState({ planData_month: item || {} });
          }
          if (item.type == 8) {
            this.setState({ planData_week: item || {} });
          }
        }
      }
    });
    KanBanService.qualityData().then((res1) => {
      if (res1.data.code == 200) {
        this.setState({ qualityData: res1?.data?.data || [] });
      }
    });
    KanBanService.qualityList().then((res2) => {
      if (res2.data.code == 200) {
        this.setState({ qualityList: res2?.data?.data || [] });
      }
    });
    KanBanService.produceRate(`?farmName=${localStorage.getItem('workShop')}`).then((res3) => {
      if (res3.data.code == 200) {
        this.setState({ produceRate: res3?.data?.data || [] });
      }
    });
    KanBanService.matterSend(`?farmName=${localStorage.getItem('workShop')}`).then((res4) => {
      if (res4.data.code == 200) {
        this.setState({ matterSend: res4?.data?.data || [] });
      }
    });
  };
  render() {
    const {
      times,
      qualityData,
      qualityList,
      produceRate,
      matterSend,
      planData_week,
      planData_month,
    } = this.state;
    return (
      <div className={styles.bg}>
        <div className={styles.header}>
          <div className={styles.title}>生产车间信息看板</div>
          <div className={styles.bottomImg}></div>
          <div className={styles.times}>{times}</div>
        </div>
        <div className={styles.content}>
          <div className={styles.contentLeft}>
            <div style={{ display: "flex", height: "28vh" }}>
              <div style={{ width: "50%" }}>
                <div className={styles.title}>月度指标达成</div>
                <div>
                  <Echarts33 data={planData_month || {}} />
                </div>
              </div>
              <div style={{ width: "50%" }}>
                <div className={styles.title}>周度指标达成</div>
                <div>
                  <Echarts33 data={planData_week || {}} />
                </div>
              </div>
            </div>
            <div style={{ height: "17.5vh" }}>
              <div className={styles.title}>质检统计</div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  textAlign: "center",
                  fontSize: 25,
                  fontWeight: "bold",
                  padding: "15px 0",
                }}
              >
                <div style={{ width: "30%" }}>
                  <div style={{ color: "#8080ff" }}>
                    {qualityData?.length ? qualityData[0].total : 0}
                  </div>
                  <div style={{ color: "#78f4f8" }}>质检数量</div>
                </div>
                <div style={{ width: "30%" }}>
                  <div style={{ color: "#95f204" }}>
                    {qualityData?.length ? qualityData[0].yes : 0}
                  </div>
                  <div style={{ color: "#78f4f8" }}>合格数量</div>
                </div>
                <div style={{ width: "30%" }}>
                  <div style={{ color: "#d9001b" }}>
                    {qualityData?.length ? qualityData[0].no : 0}
                  </div>
                  <div style={{ color: "#78f4f8" }}>不合格数量</div>
                </div>
              </div>
            </div>
            <div>
              <div className={styles.title}>质检列表</div>
              <div className={styles.table}>
                <Table1 data={qualityList || []} />
              </div>
            </div>
          </div>
          <div className={styles.contentRight}>
            <div>
              <div className={styles.title}>生产进度</div>
              <div className={styles.table}>
                <Table2 data={produceRate || []} />
              </div>
            </div>
            <div>
              <div className={styles.title}>物料发放</div>
              <div className={styles.table} style={{ marginBottom: 0 }}>
                <Table3 data={matterSend || []} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default KanBan;
